/**
 * Created by kayak-lic on 16/11/9.
 */
import React from 'react';
import util from 'util';
import {Switch, Input, Row, Col, Button, Table, Modal, Form, Collapse, Card, Radio, Tabs} from 'antd';
import {SearchDemo, RightButton, ColsEdit, Simeditor} from 'kpl';
import sys_dict from "sys_dict";

class ShareResultSelect extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            tblSource: [],
            tblSource1: [],
            tblSource2: [],
            isLoading: false,
            tb1model: false,
            tb2model: false,
        };
        this.temprecode = {};
        this.searchParams = {
            "page": 1,
            "rows": sys_dict.defaultPageSize,
        };
    }

    refresh(paramdic) {
        this.setState({isLoading: true});
        util.httpRequest({
            type: "POST", url: 'log040301.json', plattype: 'market/', params: paramdic, success: function (result) {
                this.setState({
                    tblSource: result.rows,
                    totalCount: result.total,
                    isLoading: false,
                });
            }.bind(this)
        });
    }

    search(params) {

        params.start_date = util.date2str(params.start_date);
        params.end_date = util.date2str(params.end_date);
        params.page = "1";
        params.rows = sys_dict.defaultPageSize;
        this.refresh(params);
    }

    onShowSizeChange(current, pageSize) {
        let params = this.searchParams;
        params.rows = pageSize;
        params.page = current;
        this.refresh(params);
    }

    onChange(page) {
        let params = this.searchParams;
        params.page = page;
        this.refresh(params);
        //1231231231
    }

    componentDidMount() {
        this.refresh(this.searchParams);
    }

    config() {
        const pagination = {
            total: this.state.totalCount,
            showSizeChanger: true,
            showQuickJumper: true,
            isLoading: false,
            pageSizeOptions: sys_dict.pageSizeOptions,
            defaultPageSize: sys_dict.defaultPageSize,
            onShowSizeChange: this.onShowSizeChange.bind(this),
            onChange: this.onChange.bind(this),
        };

        const pagination1 = {
            pageSize: 10,
        };
        const pagination2 = {
            pageSize: 10,
        };

        return {
            tableConfig: {
                pagination: pagination,
                dataSource: this.state.tblSource,
                columns: [
                    {
                        title: '流水号',
                        dataIndex: 'record_id',
                        key: 'record_id',
                    }, {
                        title: '发起日期时间',
                        dataIndex: 'create_date_time',
                        key: 'create_date_time',
                    }, {
                        title: '分享类型',
                        dataIndex: 'share_type',
                        key: 'share_type',
                        render: function (value, data, rowIndex) {
                            var str = util.convert("share_type", value);
                            return str;
                        }
                    }, {
                        title: '客户姓名',
                        dataIndex: 'user_name',
                        key: 'user_name',
                    }, {
                        title: '活动名称',
                        dataIndex: 'activity_name',
                        key: 'activity_name',
                    }, {
                        title: '参与人数',
                        dataIndex: 'jon_sum',
                        key: 'jon_sum',
                        render: (text, record, index) => (<span>
                        <a onClick={this.showPerson.bind(this, record, index)}>{text}</a>
                        </span>)
                    }, {
                        title: '操作',
                        dataIndex: 'operation',
                        render: (text, record, index) => (<span>
                        <a onClick={this.showDetail.bind(this, record, index)}>查看奖励</a>
                        </span>)
                    }]
            },
            tableConfig1: {
                pagination: pagination1,
                dataSource: this.state.tblSource1,
                columns: [
                    {
                        title: '流水号',
                        dataIndex: 'record_id',
                        key: 'record_id',
                        width: 250,
                    }, {
                        title: '参与日期时间',
                        dataIndex: 'invited_date_time',
                        key: 'invited_date_time',
                        width: 150,
                    }, {
                        title: '分享类型',
                        dataIndex: 'share_type',
                        key: 'share_type',
                        width: 100,
                        render: function (value, data, rowIndex) {
                            var str = util.convert("share_type", value);
                            return str;
                        }
                    }, {
                        title: '参与人手机',
                        dataIndex: 'invited_user_phone',
                        key: 'invited_user_phone',
                        width: 150,
                    }, {
                        title: '参与人名称',
                        dataIndex: 'invited_person',
                        key: 'invited_person',
                        width: 100,
                    }]
            },
            tableConfig2: {
                pagination: pagination2,
                dataSource: this.state.tblSource2,
                columns: [
                    {
                        title: '流水号',
                        dataIndex: 'expiry_serno',
                        key: 'expiry_serno',
                        width: 200,
                    }, {
                        title: '奖励日期时间',
                        dataIndex: 'expiry_time',
                        key: 'expiry_time',
                        width: 150,
                    }, {
                        title: '奖励类型',
                        dataIndex: 'prize_type',
                        key: 'prize_type',
                        width: 150,
                        render: function (value, data, rowIndex) {
                            var str = util.convert("prize_type", value);
                            return str;
                        }
                    }, {
                        title: '奖品名称',
                        dataIndex: 'voucher_name',
                        key: 'voucher_name',
                        width: 300,
                    }]
            },
        }
    }

    //查看参与人数
    showPerson(record, index) {
        this.temprecode = record;
        var paramdic = {};
        paramdic.record_id = record.record_id;
        util.httpRequest({
            type: "POST", url: 'log040305.json', plattype: 'market/', params: paramdic, success: function (result) {
                this.setState({
                    tblSource1: result.rows,
                    tb1model: true,
                    tb2model: false,
                });
            }.bind(this)
        });
    }

    //查看奖励
    showDetail(record, index) {
        this.temprecode = record;
        var paramdic = {};
        paramdic.user_id = record.user_id;
        paramdic.activity_id = record.activity_id;
        util.httpRequest({
            type: "POST", url: 'log040306.json', plattype: 'market/', params: paramdic, success: function (result) {
                for (var i = 0; i < result.rows.length; i++) {
                    if (result.rows[i].prize_type == "2") {
                        result.rows[i].voucher_name = "抽奖机会";
                    }
                }
                console.log(result.rows);
                this.setState({
                    tblSource2: result.rows,
                    tb1model: false,
                    tb2model: true,
                });
            }.bind(this)
        });
    }

    handleCancel() {
        this.temprecode = {};
        this.setState({
            tblSource1: [],
            tblSource2: [],
            tb1model: false,
            tb2model: false,
        });
    }

    render() {

        let config = this.config();
        const searchConfig = {
            searchTitle: "查询条件",
            searchInit: {
                record_id: "",
                start_date: "",
                user_id: "",
                user_name: "",
                product_id: "",
                share_type: "",
                activity_id: "",
                activity_name: ""
            },
            searchField: [
                [
                    {propsname: "流水号", propsKey: "record_id", propsType: "input", key: "111"},
                    {propsname: "发起时间", propsKey: "start_date", propsType: "datepicker", key: "112"},
                    {propsname: "至", propsKey: "end_date", propsType: "datepicker", key: "113"},
                ],
                [
                    {propsname: "客户姓名", propsKey: "user_name", propsType: "input", key: "115"},
                    {propsname: "分享类型", propsKey: "share_type", propsType: "select", key: "117"},
                    {propsname: "活动名称", propsKey: "activity_name", propsType: "input", key: "119"},

                ]
            ]
        };
        return (
            <div>
                <SearchDemo search={this.search.bind(this)} searchConfig={searchConfig}></SearchDemo>
                <Table {...config.tableConfig}></Table>
                <Modal key={Math.random()} title="参与人数" visible={this.state.tb1model}
                       onCancel={this.handleCancel.bind(this)}
                       onOk={this.handleCancel.bind(this)}
                       width="800" className="spModelCss_auto" closable={false}
                >
                    <Table {...config.tableConfig1} pagination={false} scroll={{y: 240}}></Table>
                </Modal>
                <Modal key={Math.random()} title="查看奖励" visible={this.state.tb2model}
                       onCancel={this.handleCancel.bind(this)}
                       onOk={this.handleCancel.bind(this)}
                       width="800" className="spModelCss_auto" closable={false}
                >
                    <Table {...config.tableConfig2} pagination={false} scroll={{y: 240}}></Table>
                </Modal>
            </div>
        );
    }
}

export default ShareResultSelect;